<template>
  <el-dialog title="分配" :visible.sync="open">
    <el-tag>
      你选择了{{ids.length}}个{{title}}
    </el-tag>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px">
      <el-row :gutter="5">
        <el-col :span="12">
          <el-form-item label="部门" prop="deptId">
            <treeselect v-model="form.deptId"
                        :options="deptOptions"
                        :show-count="true"
                        :disable-branch-nodes="true"
                        placeholder="请选择归属部门"
                        @input="changeDept"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户" prop="userId">
            <el-select v-model="form.userId" placeholder="请选择用户">
           <el-option v-for="item in deptUserOptions" :label="item.nickName" :value="item.userId" :key="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { deptTreeSelect } from "@/api/system/user";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { listUser } from "@/api/system/user";
  //添加线索分配
  import { addRecord } from "../../../../api/crm/record";

  export default {
        name: "assign",
      components: { Treeselect },
    props: ['type','title'],
      data(){
          return {
            ids:[],
            open: false,
            form: {
              userId:null,
              deptId:null,
            },
            // 部门树选项
            deptOptions: [],
            deptUserOptions:[],
            rules:{
             userId:[{required:true,message:'用户不能为空',trigger:'blue'}],
              deptId:[{required:true,message:'部门不能为空',trigger:'blue'}],
            }

          }
      },
      created() {
          this.getDeptTree()
      },
      methods:{
        /** 查询部门下拉树结构 */
        getDeptTree() {
          deptTreeSelect().then(response => {
            this.deptOptions = response.data;
          });
        },
        //分配线索选部门
        changeDept(val){
          this.form.userId=null;
          if(val){
            listUser({deptId: val}).then(resp=>{
             console.log(resp)
             this.deptUserOptions=resp.rows;
            })
          }else {
             this.deptUserOptions=[]
          }
        },
       //点击确认
        submitForm(){
       this.$refs.form.validate(valid=>{
         if(valid){
           this.open=false;
           this.form.id=this.ids;
           let assignRecordList=this.idsTolist();

           addRecord(this.idsTolist()).then(resp=>{
                if(resp.code==200){
                  this.$modal.msgSuccess('分配成功')
                  this.open=false;
                  this.$emit('ok')
                }
           })
         }

       })
        },
        resetForm(){
          this.form={
            deptId:null,
            userId:null,
          }
        },
        idsTolist(){
          let list=[];
          let userName= this.deptUserOptions.find(item => item.userId == this.form.userId).userName;
          for (let id of this.ids){
          let item={
             assignId:id,
             type:this.type,//枚举对象的名字
             userId:this.form.userId,
             userName:userName,
             deptId:this.form.deptId,
         }
        list.push(item)
          }
          return list;
        }

      }

    }
</script>

<style scoped>

</style>
